import React, { Component } from 'react';
import ReactDOM from 'react-dom';
let { observable, observe, computed, autorun, when, action, spy } = require("mobx");
import { observer } from "mobx-react"

import Todolist from "./todo";
import { toUnicode } from 'punycode';
// let {
//    Todo,
//    Store,
// } = Todolist;

class Todo { //list 中的变量
    id = Math.random();
    @observable text = "";
    @observable ischeck = false;
    constructor(text) {
        this.text = text;
    }
    @action.bound toggle() {
        // console.log(this.ischeck);
        this.ischeck = !this.ischeck;
    }
}
class Store { // list
    @observable todos = [];
    @action.bound addTodo(text) {
        //this.todos = [...this.todos, ...text]
        this.todos.push(new Todo(text))
    }
    @action.bound removeTodo(todo) {
        this.todos.remove(todo)
    }
}
//list 中的渲染数据item
class TotoItem extends Component {
    render() {
        let { todo } = this.props; //从上次拿到
        console.log(todo.ischeck)
        return (
            <React.Fragment>
                <input
                    type="checkbox"
                    onChange={todo.toggle}
                    checked={todo.ischeck} />
                <span className={todo.ischeck ? 'ischeck' : ''}>{todo.text}</span>
            </React.Fragment>
        )
    }
}
let data = new Store();

@observer
class Todos extends Component {

    state = {
        text: ''
    }
    handSubmit = (event) => {
        event.preventDefault; //
        let text = this.state.text; //获取
        console.log(text);
        data.addTodo(text);
    }
    handChange = (event) => {
        this.setState({
            text: event.target.value
        })
    }
    render() {
        return <div>
            <input type="text"
                onChange={this.handChange}
                value={this.state.text}
            ></input>
            <button onClick={this.handSubmit}>确定</button>
            <ul>
                {
                    this.props.data.todos.map((item, index) => (
                        <li key={index}>
                            <TotoItem todo={item} />
                        </li>
                    ))
                }
            </ul>
        </div>;
    }
}
ReactDOM.render(<Todos data={data} />, document.querySelector("#app"))